<template>
	<view class="template-details" style="height: auto;">

    <tn-nav-bar  fixed customBack :bottomShadow="false" backgroundColor="#FFFFFF">
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
			<view class="tn-flex tn-flex-col-center tn-flex-row-center ">
				<text class="tn-text-bold tn-text-xl tn-color-black">收藏列表</text>
			</view>
    </tn-nav-bar>

		<!-- 用户列表开始 -->
		<view class="list-container">
			<view class="user-list" :style="{paddingTop: vuex_custom_bar_height + 'px;'}">>
				<view class="item" v-for="(item, index) in list" :key="index">
					<image class="image" :src="item.image.url + item.image.path "></image>
					<view class="text">
						<view class="title">{{ item.image.title }}</view>
						<view class="subtitle">分享时间: {{ item.attention_time }}</view>
					</view>
					<view class="button" @click="prviewImage(item)">预 览 壁 纸</view>
				</view>
			</view>
		</view>
		<!-- 用户列表结束 -->

	</view>

</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import { collectionList } from "@/utils/api/user.js"
	export default {
		name: 'AtuhorShare',
		mixins: [template_page_mixin],
		data() {
			return {
				list: [],
				searchWhere: {
					size: 20,
					page: 1,
				},
				isOver: false,
			}
		},
		onShow() {
			this.getCollectionList()
		},
		methods: {
			getCollectionList() {
				if (this.isOver) {
					this.$func.showToast("暂无新数据")
					this.isOver = true
					return
				}
				collectionList(this.searchWhere).then(res => {
					if (res.items.length == 0) {
						this.$func.showToast("暂无新数据", 3000, true)
						this.isOver = true
						return
					}
					this.list.push(...res.items)
					this.searchWhere.page = res.page + 1
				})
			},
			prviewImage(item) {
				uni.navigateTo({
					url: "/pageA/details/details?image_uid=" + item.image.uid + "&device_type="+item.image.device_type,
				})
			},
		},
		onReachBottom() {
			this.getCollectionList()
		}
	}
</script>

<style scoped lang="scss">
	@import "@/scss/custom_nav_bar.scss";
	@import "@/scss/user_list.scss";
	/* 胶囊*/
	.tn-custom-nav-bar__back {
	  width: 100%;
	  height: 100%;
	  position: relative;
	  display: flex;
	  justify-content: space-evenly;
	  align-items: center;
	  box-sizing: border-box;
	  background-color: rgba(0, 0, 0, 0.15);
	  border-radius: 1000rpx;
	  border: 1rpx solid rgba(255, 255, 255, 0.5);
	  color: #FFFFFF;
	  font-size: 18px;
	  
	  .icon {
	    display: block;
	    flex: 1;
	    margin: auto;
	    text-align: center;
	  }
	  
	  &:before {
	    content: " ";
	    width: 1rpx;
	    height: 110%;
	    position: absolute;
	    top: 22.5%;
	    left: 0;
	    right: 0;
	    margin: auto;
	    transform: scale(0.5);
	    transform-origin: 0 0;
	    pointer-events: none;
	    box-sizing: border-box;
	    opacity: 0.7;
	    background-color: #FFFFFF;
	  }
	}
</style>